<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="单据日期">
        <el-date-picker v-model="queryParams.time" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="工单编码" prop="workorderCode">
        <el-input v-model="queryParams.workorderCode" placeholder="请输入工单编码" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['produce:lackMaterial:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="工单编码" align="center" prop="workorderCode" />
      <el-table-column label="物料编码" align="center" prop="itemCode" />
      <el-table-column label="物料名称" align="center" prop="itemName" />
      <el-table-column label="规格型号" align="center" prop="specification" />
      <!-- 2024-12-6 djj 列表页，删除“sn编码、工位名称、补料时间" -->
      <!-- <el-table-column label="sn编码" align="center" prop="snCode" />
      <el-table-column label="工位名称" align="center" prop="processName" /> -->
      <el-table-column label="缺料数量" align="center" prop="quantity" />
      <!-- <el-table-column label="补料时间" align="center" prop="supplyTime" /> -->
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import { getMaterialShortage, supplyParamexport, supplyParamexport2 } from "@/api/system/supply";
import { dataTool } from 'echarts';
import { blobValidate } from "@/utils/hici";
import { Message, Loading } from "element-ui";
import { saveAs } from "file-saver";
import moment from "moment"
let downloadLoadingInstance;
export default {
  name: "UnSupply",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        workorderCode: null,
        time: [new Date(new Date().setDate(new Date().getDate() - 2)), new Date()]
      },
      orderList: [],
      ids: [],
    };
  },
  created() {
    this.$nextTick(() => {
      this.getList();
    })
  },
  mounted() {

  },
  methods: {
    handleSelectionChange(val) {
      this.ids = val.map(item => {
        return item.id
      })
    },
    /** 查询维修工单 列表 */
    getList() {
      if ((!this.queryParams.time || this.queryParams.time.length == 0) && !this.queryParams.workorderCode) {
        this.$message.warning('请选择单据日期或者工单编码');
        return
      }
      if (this.queryParams.time) {
        this.queryParams["beginDate"] = moment(this.queryParams.time[0]).format('yyyy-MM-DD');
        this.queryParams["endDate"] = moment(this.queryParams.time[1]).format('yyyy-MM-DD');
      } else {
        this.queryParams["beginDate"] = null;
        this.queryParams["endDate"] = null;
      }
      this.loading = true;
      getMaterialShortage(this.queryParams).then(response => {
        this.orderList = response.list;
        this.total = response.totalCount;
        this.loading = false;
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.time = null;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      // this.download('/mes/pro/unSupply/getMaterialShortage', {
      //   ...this.queryParams,
      //   ids: this.ids
      // }, `expression_${new Date().getTime()}.xlsx`)
      downloadLoadingInstance = Loading.service({
        text: "正在下载数据，请稍候",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let params = JSON.parse(JSON.stringify(this.queryParams))
      params.ids = this.ids
      supplyParamexport(params).then(async data => {
        const isBlob = blobValidate(data);
        if (isBlob) {
          const blob = new Blob([data]);
          saveAs(blob, `生产缺料列表.xlsx`);
        } else {
          const resText = await data.text();
          const rspObj = JSON.parse(resText);
          const errMsg =
            errorCode[rspObj.code] || rspObj.msg || errorCode["default"];
          Message.error(errMsg);
        }
        downloadLoadingInstance.close();
      }).catch(r => {
        console.error(r);
        Message.error("下载文件出现错误，请联系管理员！");
        downloadLoadingInstance.close();
      });
    }
  }
};
</script>
